<template>
	<div class="project">
		<!-- 顶部项目信息 -->
		<el-row :gutter="20">

			<el-col :span="6">
				<div class="box">
					<div class="left_icon" style="background-color: #409EFF;">
						<i class="el-icon-folder"></i>
					</div>
					<div class="right_conetnt" style="color: #409EFF;">{{pro.name}}</div>

				</div>
			</el-col>

			<el-col :span="6">
				<div class="box">
					<div class="left_icon">
						<i class="el-icon-s-flag"></i>
					</div>
					<div class="right_conetnt">
						<div class="num">{{tasks.length}}</div>
						<div class="info">测试任务</div>
					</div>

				</div>
			</el-col>

			<el-col :span="6">
				<div class="box">
					<div class="left_icon">
						<i class="el-icon-folder-remove"></i>
					</div>
					<div class="right_conetnt">
						<div class="num">{{modules.length}}</div>
						<div class="info">项目模块</div>
					</div>

				</div>
			</el-col>

			<el-col :span="6">
				<div class="box">
					<div class="left_icon">
						<i class="el-icon-cloudy"></i>
					</div>
					<div class="right_conetnt">
						<div class="num">{{envs.length}}</div>
						<div class="info">运行环境</div>
					</div>

				</div>
			</el-col>
		</el-row>
		<!-- 分割线 -->
		<el-divider content-position="left"><span style="font-weight: bold; font-size: 16px;">项目基本信息</span></el-divider>
		<!-- 项目基本信息 -->
		<el-row :gutter="8">
			<!-- 测试任务展示 -->
			<el-col :span="6">
				<el-card class="box-card">
					<!-- 头部 -->
					<el-row>
						<el-col :span="12">
							<div class="title">测试任务</div>
						</el-col>
					</el-row>
					<!-- 内容 -->
					<el-table :data="tasks" :show-header='false' style="width: 100%">
						<el-table-column prop="name" width="180">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button size="mini" icon="el-icon-view" type="primary" plain></el-button>
							</template>
						</el-table-column>

					</el-table>
				</el-card>
			</el-col>
			<!-- 项目模块展示 -->
			<el-col :span="8">
				<el-card class="box-card">
					<!-- 头部 -->
					<el-row>
						<el-col :span="12">
							<div class="title">项目模块</div>
						</el-col>
						<el-col :span="12" style="text-align: right;">
							<el-button type="primary" plain size="mini" icon="el-icon-plus" @click="dlgAddModlues=true">
								添加模块
							</el-button>

							<!-- 添加模块 -->
							<el-dialog title="添加模块" :visible.sync="dlgAddModlues"
								style="text-align: center; font: bold 18px/18px 'microsoft yahei';">
								<el-form ref="moduleRef" :model="addModulesData" :rules="modulesRulues">
									<el-form-item prop="name">
										<el-input v-model="addModulesData.name" placeholder="请输入模块名称"
											autocomplete="off">
											<template slot="prepend">模块名称</template>
										</el-input>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dlgAddModlues = false">取 消</el-button>
							 	<el-button type="primary" @click="createMoudles">确 定</el-button>
								</div>
							</el-dialog>

						</el-col>
					</el-row>
					<!-- 内容 -->
					<el-table :data="modules" :show-header='false' style="width: 100%">
						<el-table-column prop="name" min-width="120">
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button @click="eidtAddModlues=true" size="mini" icon="el-icon-edit-outline"
									type="primary" plain></el-button>
								<!-- 编辑模块 -->
								<el-dialog title="编辑模块" :visible.sync="eidtAddModlues"
									style="text-align: center; font: bold 18px/18px 'microsoft yahei';">
									<el-form ref="eidtmoduleRef" :model="editModulesData" :rules="editmodulesRulues">
										<el-form-item prop="name">
											<el-input v-model="editModulesData.name" placeholder="请输入模块名称"
												autocomplete="off">
												<template slot="prepend">模块名称</template>
											</el-input>
										</el-form-item>
									</el-form>
									<div slot="footer" class="dialog-footer">
										<el-button @click="eidtAddModlues = false">取 消</el-button>
										<el-button type="primary" @click="updateMdoudles">确 定</el-button>
									</div>
								</el-dialog>
								<el-button size="mini" icon="el-icon-delete" type="danger" plain></el-button>

							</template>
						</el-table-column>

					</el-table>
				</el-card>
			</el-col>
			<!-- 测试环境展示 -->
			<el-col :span="10">
				<el-card class="box-card">
					<!-- 头部 -->
					<el-row>
						<el-col :span="12">
							<div class="title">项目环境</div>
						</el-col>
						<el-col :span="12" style="text-align: right;">
							<el-button type="primary" plain size="mini" icon="el-icon-plus" @click="EnvDlgShow">
								添加环境</el-button>
							<!-- 添加测试环境 -->
							<el-dialog title="添加测试环境" :visible.sync="dlgAddEnvs"
								style="text-align: center; font: bold 18px/18px 'microsoft yahei';">
								<el-form ref="evnsRef" :model="EnvData" :rules="evnsRulues">
									<el-form-item prop="name">
										<el-input v-model="EnvData.name" placeholder="请输入环境名称" autocomplete="off">
											<template slot="prepend">环境名称</template>
										</el-input>
									</el-form-item>
									<el-form-item prop="host">
										<el-input v-model="EnvData.host" placeholder="请输入host地址" autocomplete="off">
											<template slot="prepend">host</template>
										</el-input>
									</el-form-item>
									<!-- 数据库配置 -->
									<el-form-item>
										<Editor height="300" width="100%" ref="editor" :content="EnvData.db_config" v-model="EnvData.db_config" :options="{    enableBasicAutocompletion: true,    enableSnippets: true,    enableLiveAutocompletion: true,    tabSize:2,    fontSize:20,    showPrintMargin:false,}" :lang="'json'" @init="editorInit"></Editor>
									</el-form-item>
								</el-form>
								<div slot="footer" class="dialog-footer">
									<el-button @click="dlgAddEnvs = false">取 消</el-button>
									<el-button type="primary" @click="createEvns">确 定</el-button>
								</div>
							</el-dialog>

						</el-col>
					</el-row>
					<!-- 内容 -->
					<el-collapse>
						<el-collapse-item name="1" v-for='env in envs' :key='env.id'>
							<template slot="title">
								<span style="font-weight: bold; width: 180px;">{{env.name}}</span>
								<span style="font-weight: bold; color: #409EFF;">{{env.host}}</span>
							</template>
							<div>
								<div class="env_host">
									<span style="font-weight: bold; width: 180px;">服务器地址</span>
									  <el-button icon="el-icon-edit" size="mini" type="primary" plain>修改环境</el-button>
									<br>
									<span style="font-weight: bold; width: 180px; color: #919191;">{{env.host}}</span>
								</div>
		
								
							</div>
							<div>
								<div class="env_db_config">
									<span style="font-weight: bold; width: 180px;">数据库配置</span>
									  <el-button icon="el-icon-delete" size="mini" type="danger" plain>删除</el-button>
									<br>
									<span>{{env.db_config}}</span></div>
							</div>
						</el-collapse-item>
					</el-collapse>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';

	import Editor from 'vue2-ace-editor'
	export default {
		data() {
			return {
				// 保存项目的测试任务
				tasks: [],

				// 项目的模块
				modules: [],

				// 项目的测试环境
				envs: [],

				// 控制添加项目的弹框显示或者隐藏
				dlgAddModlues: false,
				eidtAddModlues: false,
				dlgAddEnvs: false,
				dlgEidtEnvs: false,
				addModulesData: {
					project: "",
					name: ""
				},

				// 编辑模块数据
				editModulesData: {
					project: "",
					name: ""
				},

				// 项目环境数据
				EnvData: {
					project: "",
					host: "",
					name: "",
					db_config: {
						host: "",
						user: "",
						password: "",
						db: "",
						charset: "",
						autocommit: true
					}
				},

				// 定义新增时的表单规则
				modulesRulues: {
					name: [{
							required: true,
							message: "请输入模块名称",
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: "模块名称长度为1-10个字",
							trigger: 'blur'
						}
					],
				},

				// 编辑模块表单规则校验
				editmodulesRulues: {
					name: [{
							required: true,
							message: "请输入模块名称",
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: "模块名称长度为1-10个字",
							trigger: 'blur'
						}
					],
				},

				// 创建项目环境校验规则
				evnsRulues: {
					name: [{
							required: true,
							message: "请输入环境名称",
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: "环境名称长度为1-10个字",
							trigger: 'blur'
						}
					],
					host: [{
						required: true,
						message: "请输入host地址",
						trigger: 'blur'
					}],
				},
			};
		},
		components: {
			Editor
		},
		methods: {
			EnvDlgShow(){
				// 对js对象进行格式化为json字符串，前方缩紧4个
				this.EnvData.db_config = JSON.stringify(this.EnvData.db_config, null, 4);
				this.dlgAddEnvs = true
			},
			// json数据编辑器配置
			editorInit() {
				require('brace/theme/chrome')
				require('brace/ext/language_tools')
				require('brace/mode/yaml')
				require('brace/mode/json')
				require('brace/mode/less')
				require('brace/snippets/json')
			},
			async getTask() {
				let response = await this.$http.getTasks({
					project: this.pro.id
				})
				//　判断响应状态码，请求是否成功，成功进行赋值，失败提示服务端返回的原因
				this.tasks = response.data.results
			},

			async getModule() {
				let response = await this.$http.getModules({
					project: this.pro.id
				})
				//　判断响应状态码，请求是否成功，成功进行赋值，失败提示服务端返回的原因
				this.modules = response.data.results
			},

			async getEnv() {
				let response = await this.$http.getEnvs({
					project: this.pro.id
				})
				//　判断响应状态码，请求是否成功，成功进行赋值，失败提示服务端返回的原因
				this.envs = response.data.results
			},

			createMoudles() {
				this.$refs.moduleRef.validate(async res => {
					if (res) {
						// 请求前先从axuo中获取到项目的project_id,并且更改项目id
						this.addModulesData.project = this.pro.id
						let response = await this.$http.createMoudles(this.addModulesData)
						if (response.status == 201) {
							// 添加成功之后关闭窗口
							this.dlgAddModlues = false
							// 获取最新的数据
							this.getModule()
							this.$message({
								message: "添加成功",
								type: 'success',
								duration: 1000
							});

							// 清空弹窗中的数据
							this.addModulesData = {
								name: "",
							};

						} else {
							this.$message({
								message: "添加失败",
								type: 'error',
								duration: 1000
							});
						}
					}
				})
			},

			updateMdoudles() {
				this.$refs.eidtmoduleRef.validate(async res => {
					// this.editModulesData = {...tasks}
					if (res) {
						// 请求前先从axuo中获取到项目的project_id,并且更改项目id
						this.editModulesData.project = this.pro.id
						let response = await this.$http.updateMdoudles(207, this.editModulesData)
						if (response.status == 200) {
							// 添加成功之后关闭窗口
							this.eidtAddModlues = false
							// 获取最新的数据
							this.getModule()
							this.$message({
								message: "添加成功",
								type: 'success',
								duration: 1000
							});

							// 清空弹窗中的数据
							this.editModulesData = {
								name: "",
							};

						} else {
							this.$message({
								message: "添加失败",
								type: 'error',
								duration: 1000
							});
						}
					}
				})

			},
			// 创建环境
			createEvns() {
				this.$refs.evnsRef.validate(async res => {
					if (res) {
						// 将编辑的json字符串转换为js对象
						this.EnvData.db_config = JSON.parse(this.EnvData.db_config);
						this.EnvData.project = this.pro.id
						let response = await this.$http.createEvent(this.EnvData)
						if (response.status == 201) {
							// 添加成功之后关闭窗口
							this.dlgAddEnvs = false
							// 获取最新的数据
							this.getEnv();
							this.$message({
								message: "添加成功",
								type: 'success',
								duration: 1000
							});
						
							// 清空弹窗中的数据
							this.editModulesData = {
								name: "",
							};
						
						} else {
							this.$message({
								message: "添加失败",
								type: 'error',
								duration: 1000
							});
						}
					}
				})
			}
		},
		computed: {
			...mapState(['pro'])
		},

		created() {
			this.getTask()
			this.getModule()
			this.getEnv()
		}
	}
</script>

<style scoped>
	.box {
		box-shadow: 0 0 2px #BCBCBC;
		height: 80px;
		/* 设置为弹性盒模型 */
		display: flex;
		/* 让盒子内容垂直居中显示 */
		align-items: center;
	}

	.left_icon {
		height: 80px;
		width: 80px;
		background: #64d572;
		font-size: 48px;
		line-height: 80px;
		color: #fff;
		text-align: center;
	}

	.right_conetnt {
		flex: 1;
		font: bold 24px/24px "microsoft yahei";
		text-align: center;
		color: #64d572;
	}

	.right_conetnt .info {
		font: normal 14px/14px "microsoft yahei";
		color: #919191;

	}

	.el-card {
		box-shadow: 0 0 5px #409EFF;
		height: 400px;
	}

	.title {
		font: bold 18px/24px "microsoft yahei",

	}
	.host_name{
		font: bold 18px/24px "microsoft yahei",
	}
</style>
